<template>
    <div>
        <!-- 主体部分 -->
		<section class="main">
			<input id="toggle-all" class="toggle-all" type="checkbox">
			<label for="toggle-all">Mark all as complete</label>
			<ul class="todo-list">
				<!-- These are here just to show the structure of the list items -->
				<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
				<li 
                    :class="{completed: item.done, editing: item.id == editId}" 
                    v-for="item in $store.state.list"
                    :key="item.id">
					<div class="view">
						<input 
                           class="toggle" 
                           type="checkbox"
                           :checked="item.done"
                           @input="changeStatus(item.id)"
                        >
						<label @dblclick="showEdit(item.id)">{{ item.name }}</label>
						<button @click="delTodo(item.id)" class="destroy"></button>
					</div>
					<input class="edit" :value="item.name" @keyup.enter="hideEdit">
				</li>
			</ul>
		</section>
    </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
    data() {
        return {
            editId: -1
        }
    },
    methods: {

        //
        ...mapMutations(['delTodo', 'updateTodo', 'changeStatus']),
        //起别名
        ...mapMutations({
            deltodo: 'delTodo',
            changestatus: 'changeStatus'
        }),

        //映射actions
        ...mapActions(['asyncDelTodo']),

        //删除任务
        delTodo(id) {
            // this.$store.commit('delTodo', {
            //     id
            // })
            // this.$store.dispatch('asyncDelTodo', {
            //     id
            // })
            // this.deltodo({ id })
            this.asyncDelTodo({id})
        },
        //显示编辑状态
        showEdit(id) {
            this.editId = id
        },
        //隐藏编辑状态
        hideEdit(e) {
            //修改
            this.updateTodo({
                id: this.editId,
                name: e.target.value
            })
            // this.$store.commit('updateTodo',{
                // id: this.editId,
                // name: e.target.value
            // })
            this.editId = -1
        },
        //修改状态
        changeStatus(id) {
            // this.$store.commit('changeStatus', {
            //     id
            // })
            this.changestatus({id})
        }
    }
}
</script>

<style>
    
</style>